<template>
  <view>
    <view class="header">
      <view>
        <u-swiper
          :list="list1"
          indicator
          indicatorMode="line"
          height="150"
          circular
          :autoplay="true"
        >
        </u-swiper>
      </view>
      <view class="container">
        <view @click="Releasesource()" class="image_one">
          <image src="../../static/iocn41.png"></image><text>货源大厅</text>
        </view>
        <view @click="Findspecialline()">
          <image src="../../static/iocn2.png"></image><text>查找专线</text>
        </view>
        <view @click="changyongluxian()">
          <image src="../../static/iocn42.png"></image><text>常用路线</text>
        </view>
        <view @click="Mywaybill()">
          <image src="../../static/iocn3.png"></image><text>我的运单</text>
        </view>
      </view>
    </view>

    <view class="content">
      <view class="current">最新货源</view>
      <view
        class="description"
        v-for="(item, index) in list"
        :key="index"
        @click="skip(item)"
      >
        <view class="description_top">
          <view class="fl">
            <text>{{ item.shipZone }}</text>
            <image src="../../static/iocn4.png"></image>
            <text>{{ item.receiveZone }}</text>
          </view>
          <!-- <view class="fr">2022.10.31 14:28</view> -->
        </view>
        <view class="description_key">
          <text
            >货物信息：{{ item.goodsName }} {{ "/" }} {{ item.goodsPackagMethod }} {{ "/" }} {{ item.goodsSize }}m³ {{ "/" }} {{ item.goodsWeight }}T
          </text>
          <text
            >车辆信息：{{ item.lesscarload }} {{ "/" }} {{ item.demandLength }} {{ "/" }} {{ item.demandLoad }}T {{ "/" }} {{ item.demandStyle }}
          </text>
          <view class="money">
            <text>总运费:</text>
            <text style="color: #ef4d3d; font-weight: 600">{{
              item.amountTotal
            }}</text>
            <text>元</text>
          </view>
        </view>
        <view class="description_box">
          <view class="iocn">
            <view class="iocn1">
              <image src="../../static/iocn8.png" />
            </view>
            <view class="iocn2">
              <text>货主: {{ item.shipContact }}</text>
            </view>
            <text class="textb" v-if="item.returnDeposit == true"
              >（订金可退还）</text
            >
            <text class="textb" v-else>（订金不可退还）</text>
          </view>
          <text class="texta" @click="shows">报价</text>
        </view>
      </view>
    </view>

    <view>
      <Tabbar :current="'0'"></Tabbar>
    </view>

    <!-- 弹窗 -->
    <view class="screenshot" v-show="notification">
      <view class="screenshot_key">
        <image src="../../static/Noorder.png" class="image_top"></image>
        <uni-icons
          type="closeempty"
          size="30"
          class="image_gb"
          @click="guanbi()"
        ></uni-icons>
        <view class="screenshot_top">很抱歉，您还没有进行身份认证</view>
        <view class="screenshot_box"
          >需上传身份证或驾驶证、行驶证认证成功即可进行报价接单</view
        >
        <view class="screenshot_zhen" @click="authentication()">去认证</view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  Authenticate,
  GetWeiXinLogin,
  GetNewShipbill,
  CreateAudio,
  CreateTransTrack,
  GetPlayQueue,
  SetUserLocation,
  GetUserMsgCfg,
} from "@/public/Api/update.js";
import { setValue, getValue } from "@/public/storeage/index.js";
import Tabbar from "@/pages/navigation/sjnavigation.vue";
export default {
  components: {
    //注册组件
    Tabbar,
  },
  data() {
    return {
      list1: [
        "https://syh-1.oss-cn-shanghai.aliyuncs.com/a4c27def-5b5a-4100-b38a-d38c00b17dfd.jpg",
        "https://syh-1.oss-cn-shanghai.aliyuncs.com/banner_syh.png",
      ],
      list: [],
      notification: false,
      skipCount: 0,
      maxResultCount: 10,
      shows: true,
      fileName: "",
      length: 0,
      latitude: 0,
      longitude: 0,
      speed: 0,
      position: "",
      contents: "",
      ditu: "",
      nowLocation: "",
      time: 30000,
      ad: null,
    };
  },
  onLoad() {
    uni.hideHomeButton();
    var id = getValue("id");
    if (id == undefined || id == null || id == "") {
      uni.reLaunch({
        url: "/pages/Loginas/logon",
      });
      return false;
    }
    this.GetUserMsgCfg();
    this.GetNewShipbill();
    this.getloc();
    var status = getValue("status");

    if (status !== "正常") {
      uni.reLaunch({
        url: "/pages/Loginas/index",
      });
      return false;
    }
    var approved = getValue("approved");
    this.shows = approved;
	uni.authorize({
		scope: "scope.userLocation",
		success: (res) => {
			console.log("用户同意了授权", res);
		},
	});
  },
  onHide() {
    clearInterval(this.ad);
  },
  watch: {
    length: {
      handler(newLength, oldLength) {
        if (newLength > this.length) {
          this.CreateAudio();
        }
      },
      immediate: false,
      deep: true,
    },
  },
  //下拉刷新
  onPullDownRefresh() {
    uni.startPullDownRefresh({
      success: () => {
        this.GetNewShipbill();
      },
    });
    uni.stopPullDownRefresh();
  },
  methods: {
    guanbi() {
      this.notification = false;
    },
    skip(e) {
      var id = e.id;
      if (this.shows == false) {
        this.notification = true;
      } else {
        uni.navigateTo({
          url: "/pages/quotedprice/sjDetailspage?id=" + id,
        });
      }
    },

    Releasesource() {
      if (this.shows == false) {
        this.notification = true;
      } else {
        uni.navigateTo({
          url: "/pages/Releasesource/hall",
        });
      }
    },
    changyongluxian() {
      uni.navigateTo({
        url: "/pages/Findspecialline/sjcommon",
      });
    },
    Findspecialline() {
      uni.navigateTo({
        url: "/pages/Findspecialline/sjindex/sjindex",
      });
    },
    Mywaybill() {
      uni.navigateTo({
        url: "/pages/Mywaybill/sjIndex",
      });
    },

    authentication() {
      uni.navigateTo({
        url: "/pages/PersonalCenter/sjauthentication",
      });
    },

    //获取播报队列
    async GetPlayQueue() {
      var userId = getValue("id");
      const { data: res } = await GetPlayQueue({
        userId,
      });
      if (res.result == null) {
        return false;
      } else {
        this.CreateAudio(res.result.contents);
      }
    },
    // 获取最新货源
    async GetNewShipbill() {
      var skipCount = this.skipCount;
      var maxResultCount = this.maxResultCount;
      var driverId = getValue("id");
      var isRoute = 1;
      try {
        const { data: res } = await GetNewShipbill({
          skipCount,
          maxResultCount,
          driverId,
          isRoute,
        });
        console.log(res);
        this.list = res.result.items;
        this.length = res.result.totalCount;
      } catch (e) {}
    },

    //运单播报
    async CreateAudio(contents) {
      var content = contents;
      var format = "mp3";
      var voice = "xiaoyun";

      try {
        const { data: res } = await CreateAudio({
          content,
          format,
          voice,
        });
        this.fileName = res.result.fileName;
        this.ScanAudio();
      } catch (e) {}
    },
    async ScanAudio() {
      var music = null;

      music = uni.createInnerAudioContext(); //创建播放器对象

      music.src = this.fileName;

      music.play(); //执行播放

      music.onEnded(() => {
        //播放结束

        music = null;
      });
    },
    getloc() {
      setInterval(() => {
        uni.getLocation({
          type: "gcj02",
          isHighAccuracy: true,
          geocode: true,
          success: (res) => {
            console.log(res, "当前");
            this.latitude = res.latitude;
            this.longitude = res.longitude;
            this.speed = res.speed;
            var place = `${this.latitude},${this.longitude}`;
            this.ditu = JSON.stringify([
              {
                latitude: this.latitude,
                longitude: this.longitude,
              },
            ]);
            this.nowLocation = `${res.latitude},${res.longitude}`;
            //腾讯地图逆地址解析--获取城市信息
            uni.request({
              url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${this.latitude},${this.longitude}&key=LDXBZ-TTGRI-6CJGB-UNANB-J3CB7-G3FST`,
              success: (res) => {
                console.log(res, "res321"); //位置信息
                this.position = res.data.result.address;
              },
            });
            if (this.position == "") {
              return false;
            } else {
              this.CreateTransTrack();
            }
          },
        });
      }, 1000 * 60 * 5);

      setInterval(() => {
        this.SetUserLocation();
      }, 1000 * 60 * 10);
    },
    //创建运输轨迹
    async CreateTransTrack() {
      var driverId = getValue("id");
      var trackJson = this.ditu;
      var speed = this.speed;
      var position = this.position;
      try {
        const { data: res } = await CreateTransTrack({
          driverId,
          trackJson,
          speed,
          position,
        });
      } catch (e) {}
    },
    //创建位置
    async SetUserLocation() {
      var userId = getValue("id");
      var nowLocation = this.nowLocation;
      if (
        nowLocation == "" ||
        nowLocation == null ||
        nowLocation == undefined
      ) {
        return false;
      }
      try {
        const { data: res } = await SetUserLocation({
          userId,
          nowLocation,
        });

        console.log(res, "ponts");
      } catch (e) {}
    },
    async GetUserMsgCfg() {
      var userId = getValue("id");
      try {
        const { data: res } = await GetUserMsgCfg({
          userId,
        });
        this.time = res.result.ttsInterval;
        var time = this.time * 1000;
        if (res.result.enableTTS == true) {
          this.ad = setInterval(() => {
            this.GetPlayQueue();
          }, time);
        }
      } catch (e) {}
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f7f7f7;
}

.header {
  position: fixed;
  top: 0;
  z-index: 999;
  margin-left: 17upx;
  background-color: #f7f7f7;
}

.container {
  width: 721.96upx;
  height: 166.47upx;
  opacity: 1;
  border-radius: 17.52upx;
  background: #ffffff;
  box-shadow: 1.75upx 1.75upx 7.01upx 0px #cccccc,
    1.75upx 1.75upx 7.01upx 0px #cccccc;
  margin: 0 auto;
  margin-top: 20upx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .image_one {
    image:nth-child(1) {
      background-color: #ef4d3d;
      width: 95upx;
      height: 95upx;
      margin: 0 auto;
      border-radius: 18upx;
      padding: 8upx;
    }
  }

  view {
    width: 33.33333%;

    image {
      width: 105upx;
      height: 105upx;
      margin: 0 auto;
      display: block;
    }

    image:nth-child(1) {
      background-color: #ef4d3d;
      width: 105upx;
      height: 105upx;
      margin: 0 auto;
      border-radius: 18upx;
    }

    text {
      display: block;
      font-size: 24.53upx;
      font-weight: 500;
      color: rgba(0, 0, 0, 1);
      text-align: center;
      padding-top: 10upx;
    }
  }
}

.content {
  width: 721.96upx;
  opacity: 1;
  border-radius: 17.52upx;
  background: #ffffff;
  box-shadow: 1.75upx 1.75upx 7.01upx 0px #cccccc,
    1.75upx 1.75upx 7.01upx 0px #cccccc;
  margin: 0 auto;
  margin-top: 500upx;

  .current {
    font-size: 31.54upx;
    font-weight: bold;
    line-height: 47upx;
    padding-top: 15upx;
    padding-left: 37upx;
    position: relative;
  }

  .current:after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180.49upx;
    height: 12.27upx;
    opacity: 1;
    background-image: url(../../static/rectangle.png);
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-position: center 0;
    margin-left: -245upx;
    margin-top: 20upx;
  }

  .description {
    margin-top: 20upx;
    border-radius: 17.52upx;
    box-shadow: 1.75upx 1.75upx 7.01upx 0px #cccccc,
      1.75upx 1.75upx 7.01upx 0px #cccccc;
    padding: 0 38upx;

    .description_top {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .fl {
        display: flex;
        align-items: center;

        text {
          width: 240upx;
          font-size: 26upx;
          font-weight: bold;
          color: #000;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        image {
          width: 109upx;
          height: 109upx;
        }
      }

      .fr {
        font-size: 15.77upx;
        color: rgba(56, 56, 56, 1);
      }
    }

    .description_key {
      margin-top: -30upx;
      padding-bottom: 20upx;
      border-bottom: 2upx solid #e5e5e5;

      text {
        display: block;
        font-size: 21.03upx;
        font-weight: 400;
        color: rgba(56, 56, 56, 1);
        padding-top: 15upx;
      }
    }

    .description_box {
      padding: 14upx 0;
      display: flex;
      align-items: center;

      .iocn {
        width: 100%;
        display: flex;
        align-items: center;
      }

      .iocn1 {
        image {
          width: 75upx;
          height: 75upx;
        }
      }

      .iocn2 {
        width: 170upx;
        line-height: 30upx;
        text-align: center;

        text {
          width: 170upx;
          font-size: 22.78upx;
          font-weight: 500;
          background-color: #ffffff;
          color: rgba(56, 56, 56, 1);
        }
      }

      .textb {
        color: #808080;
        font-size: 24upx;
      }

      .texta {
        width: 120upx;
        line-height: 50upx;
        border-radius: 10upx;
        font-size: 32.78upx;
        font-weight: 600;
        text-align: center;
        color: #fff;
        background-color: #ef4d3d;
      }
    }
  }
}

.screenshot {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;

  .screenshot_key {
    width: 676.4upx;
    height: 441.59upx;
    opacity: 1;
    background: #ffffff;
    box-shadow: 1.75upx 1.75upx 7.01upx 0px #e5e5e5;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .image_top {
      width: 506upx;
      height: 506upx;
      display: block;
      margin: 0 auto;
      margin-top: -350upx;
    }

    .image_gb {
      width: 32upx;
      height: 32upx;
      position: absolute;
      top: 8upx;
      right: 48upx;
    }

    .screenshot_top {
      font-size: 29.79upx;
      font-weight: bold;
      letter-spacing: 3.5upx;
      color: rgba(0, 0, 0, 1);
      text-align: center;
      margin-top: -70upx;
    }

    .screenshot_box {
      padding: 46upx 40upx 0;
      font-size: 28.04upx;
      font-weight: 400;
      letter-spacing: 3.5upx;
      line-height: 61.33upx;
      color: rgba(56, 56, 56, 1);
      text-align: center;
    }

    .screenshot_zhen {
      width: 231.31upx;
      height: 71.85upx;
      line-height: 71.85upx;
      opacity: 1;
      border-radius: 17.52upx;
      background: #f04d3e;
      color: rgba(255, 255, 255, 1);
      font-size: 31upx;
      text-align: center;
      margin: 0 auto;
      margin-top: 30upx;
    }
  }
}

.money {
  display: flex;
  align-items: center;
}
</style>
